<template>
	<!-- 列表样式 -->
	<view class="p-2">
		<!-- 头像昵称 | 关注按钮 -->
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<!-- 头像 -->
				<image class="rounded-circle mr-2" :src="item.userpic"  @click="openSpace"
				style="width: 60rpx;height: 60rpx;" lazy-load></image>
				<!-- 昵称发布时间 -->
				<view>
					<view class="font-small" style="line-height: 1.5;">{{item.username}}</view>
					<text class="font-small" style="color: #9D9589;line-height: 1.5;">{{item.txt_time}}</text>
				</view>
			</view>
			<!-- 按钮 -->
			<view  @click="follow" v-if="!item.isFollow"
			 class="flex align-center justify-center rounded font-small animated" 
			style="width: 90rpx;height: 50rpx; background-color: #DD524D; color:#FFFFFF;" hover-class="jello">
				关注
			</view>
		</view>
		<!-- 内容-->
		<view @click="openDetail" class="font-sm" style="margin: 10rpx 0; padding: 2rpx;">{{item.txt}}</view>			
		<!-- 图片 -->
		<slot>
		<view class="flex align-center justify-between flex-1" >
	     <image @click="openDetail" v-if="item.txt_pic" :src="item.txt_pic" style="height: 260rpx;width:100%; margin: 5rpx;
		 border-radius: 5rpx;" mode="aspectFill"></image>
		</view>
		</slot>
		
		<view style="margin:10rpx 10rpx;">
			<uni-tag text="#大龄" type="primary" :circle="true" size="small"  style="margin-right: 10rpx;"></uni-tag>
			<uni-tag text="#单身" type="error" :circle="true" size="small" style="margin-right: 10rpx;"></uni-tag>
			<uni-tag text="#高收入" type="success" :circle="true" size="small" ></uni-tag>
		</view>
		
		<!-- 图标按钮 -->
		<view class="flex align-center">
			<!-- 顶 -->
			<view class="flex align-center justify-center flex-1 animated faster"
			 hover-class="jello text-main " @click="doSupport('support')" 
			 :class="item.support.type ==='support'?'support-active':''" >
				<text class="iconfont icon-dianzan " style="margin-right: 20rpx;" ></text>
				<text>{{item.support.support_count > 0 ? item.support.support_count : '支持'}}</text>
			</view>
			   <!-- 踩 -->
			 <view class="flex align-center justify-center flex-1 animated faster"
			  hover-class="jello text-main" @click="doSupport('unsupport')" 
			  :class="item.support.type ==='unsupport'?'support-active':''">
				<text class="iconfont icon-iconfontzan" style="margin-right: 20rpx;"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '反对'}}</text>
			</view> 
			
			<view class="flex align-center justify-center flex-1 animated faster" 
			hover-class="jello text-main" @click="doComment" >
				<text class="iconfont icon-pinglun" style="margin-right: 20rpx;"></text>
				<text>{{item.comment_count > 0? item.comment_count : '评论'  }}</text>
			</view>
					
			<view class="flex align-center justify-center flex-1 animated faster" 
			hover-class="jello text-main" @click="doShare">
				<text class="iconfont icon-fenxiang" style="margin-right: 20rpx;"></text>
				<text>{{item.share_num > 0 ? item.share_num : '分享' }}</text>
			</view>
		</view>
	</view>		
</template>

<script>
	import uniTag from "@/components/uni_ui/uni-tag/uni-tag.vue"
	export default{
		components:{
			uniTag
		},
		props:{
			item:Object,
			index:{
				type:Number,
				default:-1
			},
			isdetail:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			//打开个人空间
			openSpace(){
				uni.navigateTo({
					url: '/pages/user-space/user-space',
					
				});
			},
			//关注
			follow(){
				//通知父组件
				this.$emit('follow',this.index)
			},
			//进入详情页
			openDetail(){
		    //处于详情中
			if(this.isdetail) return;
			uni.navigateTo({
			url: '../../pages/detail/detail?detail='+JSON.stringify(this.item),								
								});	
			},
			//顶踩操作
			doSupport(type){
				this.$emit('doSupport',{
					type:type,
					index:this.index
				})
			},
			//评论
			doComment(){
				if (!this.isdetail){
					 return this.openDetail()
				}
				this.$emit('doComment')
			},
			//分享
			doShare(){
				if (!this.isdetail){
					 return this.openDetail()
				}
				this.$emit('doShare')
			}
		}
	}
</script>

<style>
	.support-active{
		color: #FF4A6A;
	}
</style>
